<!doctype html>
<!--
Copyright (c) 2011 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<html dir="ltr" lang="en">
<title>Quota Internals</title>
<meta charset="utf-8">
<link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
<link rel="stylesheet" href="main.css">

<link rel="stylesheet" href="chrome://resources/css/tabs.css">
<link rel="stylesheet" href="chrome://resources/css/tree.css">

<script type="module" src="event_handler.js"></script>

<body>

<tabbox>
  <tabs>
    <tab>Summary</tab>
    <tab>Usage &amp; Quota</tab>
    <tab>Raw Data Dump</tab>
  </tabs>
  <tabpanels>
    <tabpanel>
      <!-- Summary -->
      <h2>Summary</h2>

      <template id="table-row-template">
        <tr>
          <td></td>
          <td></td>
        </tr>
      </template>

      <table>
        <tbody>
          <tr>
            <td>Free disk space for the profile directory.</td>
            <td id="diskspace-entry">N/A</td>
          </tr>
        </tbody>
      </table>
      <h2>Misc Statistics</h2>
      <table>
        <tbody id="stat-entries" class="entries"></tbody>
      </table>
      <div id="storage-pressure-section">
        <h2>Test Storage Pressure Behavior</h2>
        <div id="storage-pressure-loading">
          Loading...
        </div>
        <div id="storage-pressure-outer" hidden>
          <div class="pressure">
            Origin to test:
            <input id="storage-pressure-origin"
                   value="https://www.example.com">
          </div>
          <div class="pressure">
            <button id="trigger-notification">
              Trigger Storage Pressure Notification
            </button>
          </div>
        </div>
        <div id="storage-pressure-disabled" hidden>
          Storage Pressure feature disabled.
        </div>
      </div>
    </tabpanel>

    <tabpanel>
      <!-- Usage and Quota -->
      <h2>Usage and Quota Database Browser</h2>
      <div id="tree-view-container">
        <button id="refresh-button">Refresh</button>
        <tree id="tree-view"></tree>
      </div>
      <table>
        <thead></thead>
        <tbody id="tree-item-description"></tbody>
      </table>
    </tabpanel>

    <tabpanel>
      <!-- Raw Data Dump -->
      <button id="dump-button">Dump Raw Data</button>
      <pre id="dump-field"></pre>
    </tabpanel>
  </tabpanels>
</tabbox>

</body>
</html>
